import React, { Component } from 'react'
import axios from "axios"
import Clacss from "../scss/Classify.module.scss"
import { Button, Toast } from 'antd-mobile';
import store from '../store';
/* 导入仓库的动作 */
import { getgoodlist, cleargoodlist } from "../store/actionCreate/getgoodlist"
/* 1. 引入一个连接器 connect */
import { connect } from "react-redux"


class Goodlist extends Component {
    query = "";
    pagenum = 1;
    total = 0; // 页码的总数
    pagesize = 20; // 每页的条数
    state = {
        showpage: "gliComprehensive",
        message: {},
        goods: [],
        pagenums: 2,
        loading: true,
        timer: null
    }
    /* 返回上一级 */
    backTohome = () => {
        window.history.back()
    }
    /* tab更换 */
    changePage = (show) => {
        this.setState({
            showpage: show
        })
    }
    /* 滚动触底函数+滚动防抖*/
    timer = null
    scrollBottom(e) {

        const clientHeight = e.currentTarget.clientHeight
        // console.log("窗口高度", clientHeight);
        const scrollHeight = e.currentTarget.scrollHeight
        // console.log("可滚动高度高度", scrollHeight);
        const scrollTop = e.currentTarget.scrollTop
        // console.log("已经滚动", scrollTop);

        if (scrollHeight - clientHeight - scrollTop < 1) {
            console.log("已触底");
            if (this.timer) {
                clearTimeout(this.timer)
                this.timer = null
            } else {
                this.timer = setTimeout((params) => {
                    store.dispatch(getgoodlist(this.pagenum))
                    this.pagenum++
                }, 500)
            }
        }
    }
    /* 组件挂载时 */
    componentDidMount() {
        console.log("goodlist挂载结束");
        /* 派发请求数据任务 */
        store.dispatch(getgoodlist(this.pagenum))
        this.pagenum++
    }
    /* 组件卸载时 */
    componentWillUnmount() {
        console.log("goodlist已卸载");
        store.dispatch(cleargoodlist())

    }
    render() {
        return (
            <div className={Clacss.claduct + " " + "goodlist"}>
                {/* 主页头部 */}
                <div className={Clacss.claHeader}>
                    <div className={Clacss.claHeaderLef} onClick={this.backTohome}><span className="iconfont claback">&#xe66e;</span></div>
                    <div className={Clacss.claHeaderCen}>商品列表</div>
                    <div className={Clacss.claHeaderRig}><span></span></div>
                </div>
                {/* 主体部分 */}
                <div className={Clacss.glisSearch}>
                    <Button>搜索</Button>
                </div>
                <div className={Clacss.glisNav}>
                    <div className={Clacss.glisNavItem} onClick={this.changePage.bind(this, "gliComprehensive")}>综合</div>
                    <div className={Clacss.glisNavItem} onClick={this.changePage.bind(this, "glisSales")}>销售</div>
                    <div className={Clacss.glisNavItem} onClick={this.changePage.bind(this, "glisPrices")}>价格</div>
                </div>
                {
                    this.state.showpage === "gliComprehensive" ? (this.props.goods ? (
                        < div className={Clacss.gliComprehensive} onScroll={this.scrollBottom.bind(this)}>
                            {this.props.goods.map((value, index) => {
                                return (

                                    <div className={Clacss.glisListItem} key={value.goods_id} onClick={() => this.props.history.push("goodsdetails/" + value.goods_id)}>
                                        <img src={value.goods_small_logo || "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604660016268&di=67811483746ab04d4a5616b7329671c5&imgtype=0&src=http%3A%2F%2F01.minipic.eastday.com%2F20161106%2F20161106103232_ee37117368c27f98195f5bb9abbc847f_10.jpeg"} alt="" />
                                        <div className={Clacss.glisListItemtro}>
                                            <p>{value.goods_name}</p>
                                            <span>￥{value.goods_price}</span>
                                        </div>
                                    </div>

                                )
                            })}
                        </div>
                    ) : null)
                        : null
                }
                {
                    this.state.showpage === "glisSales" ? (
                        /* 销量排序 */
                        <div className={Clacss.glisSales}>
                            这是销量排序
                        </div>
                    ) : null
                }
                {
                    this.state.showpage === "glisPrices" ? (
                        /* 价格排序 */
                        <div className={Clacss.glisPrices}>
                            这是价格排序
                        </div>
                    ) : null
                }


            </div >
        )
    }
}

// Add a request interceptor请求拦截器
axios.interceptors.request.use(
    function (config) {
        // Do something before request is sent
        //     content	提示内容	React.Element or String	无
        // duration	自动关闭的延时，单位秒	number	3
        // onClose	关闭后回调	Function	无
        // mask	是否显示透明蒙层，防止触摸穿透	Boolean	true
        Toast.loading("正在加载中...", 0, null, true);
        return config;
    },
    function (error) {
        // Do something with request error
        return Promise.reject(error);
        Toast.hide();
    }
);

// Add a response interceptor接收拦截器
axios.interceptors.response.use(
    function (response) {
        Toast.hide();
        // Any status code that lie within the range of 2xx cause this function to trigger
        // Do something with response data
        return response;
    },
    function (error) {
        Toast.hide();
        // Any status codes that falls outside the range of 2xx cause this function to trigger
        // Do something with response error
        return Promise.reject(error);
    }
);

/* 定义一个函数 函数返回需要的属性 */
/* 拆分和合并reducer主页就是修改数据的获取方法 state.numchange.num和state.num,*/
const mapStateToProps = (state) => {
    return {
        goods: state.goodlistreducer.goodlist
    }
}

/* 3. 通过connect 函数注入属性和方法 */
// connect 第一个参数注入属性 第二个参数注入的方法
export default connect(mapStateToProps, null)(Goodlist);


//    /* async请求列表数据 */
//    asyncGetlist = async () => {
//     console.log("请求数据开始");



//     const res = await axios.get("https://www.linweiqin.cn/api/public/v1/goods/search", {
//         params: {
//             pagenum: this.state.pagenums
//         }
//     })
//     let goods = this.state.goods
//     let nums = this.state.pagenums + 1
//     res.data.message.goods.forEach((value) => {
//         goods.push(value)
//     })
//     this.setState({
//         goods: goods,
//         pagenums: nums
//     }, () => {

//         this.timer = null
//         console.log("请求数据结束,页码=>", this.state.pagenums);

//     })
// }
// /* 请求列表数据 */
// getlist = () => {
//     console.log("请求数据开始");
//     var config = 111
//     // Toast.loading("正在加载中...", 0, null, true);
//     axios.get("https://www.linweiqin.cn/api/public/v1/goods/search", {
//         params: {
//             pagenum: this.state.pagenums
//         }
//     }).then(res => {
//         let goods = this.state.goods
//         let nums = this.state.pagenums + 1
//         res.data.message.goods.forEach((value) => {
//             goods.push(value)
//         })
//         this.setState({
//             goods: goods,
//             pagenums: nums
//         })
//     })

// }